<template>
    <div class="right_view_wp" ref="rightViewDoc">
        <div class="left">
            <div class="left_bg">
                <span>webStock</span>
            </div>
            <div class="left_bg">
                <span>webStock</span>
            </div>
            <ul class="left_list" id="left_list">
                <li v-for="(item, index) in props.rightViewMenu" :key="item.type">
                    <div v-if="item.isbar != 1" class="l_l_li" :class="{ active: avtiveLi == index }"
                        @mouseover="setActive(index, $event)" @mouseleave="clearActive" @click.stop="clickTap(index)">
                        <i v-if="item.show && !item.iselect" class="iconfonMy icon-duigou1 select_icon"></i>
                        <span><i class="iconfonMy tubiao" :class="item.icon">{{ item.name }}</i> {{ item.type }}</span>
                        <span v-if="item.type2">{{ item.type2 }}</span>
                        <i v-if="item.childer" class="iconfonMy icon-sanjiao"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right" :style="{ top: rightTop + 'px' }" v-show="props.rightViewMenu[avtiveLi]?.childer">

            <div class="left_bg">
                <span>webStock</span>
            </div>
            <ul class="left_list">
                <li class="l_l_li" :class="{ active: avtiveLiChild == 0 }" @mouseover="setActiveChild(0)"
                    @mouseleave="clearActiveChild">
                    <span>我的自选</span>
                    <!-- <span>F6</span> -->
                    <i class="iconfonMy icon-sanjiao"></i>
                </li>
                <li class="l_l_li" :class="{ active: avtiveLiChild == 1 }" @mouseover="setActiveChild(1)"
                    @mouseleave="clearActiveChild">
                    <span>我的自选</span>
                    <span>F6</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { mainStore, chartStore } from '@/store/index.js'
import bus from '@/utils/bus.js'
const { ipcRenderer } = require('electron');

const storeMain = mainStore()
const storeChart = chartStore()


const props = defineProps(['rightViewMenu', 'rightViewType']);


const avtiveLi = ref(-1)
const avtiveLiChild = ref(-1)
const rightTop = ref(0)
const isRight = ref(false)
const rightViewDoc = ref(null)



onMounted(() => {
    rightViewDoc.value.style.top = storeMain.rightViewXY.y + 20 + 'px'
    rightViewDoc.value.style.left = storeMain.rightViewXY.x + 10 + 'px'
})

const clickTap = (e) => {
    if (props.rightViewType == '其他按钮') {
        storeChart.toolMeun[e].show = !storeChart.toolMeun[e].show
        if (storeChart.toolMeun[e].type == '画图工具箱') {
            ipcRenderer.send('createHuaTuGj', JSON.stringify(storeChart.toolMeun));
            bus.emit('hideRightView')
        }
        localStorage.setItem('headToolMenuInfo', JSON.stringify(storeChart.toolMeun))
    }
}
const setActive = (index, event) => {
    avtiveLi.value = index

    isRight.value = true

    let parentRect = document.getElementById('left_list').getBoundingClientRect()
    const rect = event.target.getBoundingClientRect();
    rightTop.value = rect.top - parentRect.top - 2
}
const clearActive = () => {
    isRight.value = false
    avtiveLi.value = -1
}

const setActiveChild = (index) => {
    avtiveLiChild.value = index
}
const clearActiveChild = () => {
    avtiveLiChild.value = -1
}

</script>

<style scoped lang="less">
.right_view_wp {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 500;

    .left,
    .right {
        background-color: #fff;
        width: 145px;
        padding: 2px;
        position: relative;
        min-height: 100px;

        .left_bg {
            background-color: #a8c2dc;
            width: 20px;
            position: absolute;
            top: 2px;
            left: 2px;
            height: calc(100% - 4px);

            span {
                writing-mode: vertical-rl;
                text-orientation: mixed;
                transform: rotate(180deg);
                position: absolute;
                bottom: 0;
                left: 3px;
                font-size: 22px;
                line-height: 18px;
                font-family: '仿宋';
                color: #fff;
            }
        }

        .left_list {
            color: #000;
            line-height: 20px;
            overflow-y: scroll;
            max-height: 577px;

            .l_l_li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 25px;
                border: 1px solid transparent;
                position: relative;

                span {
                    padding-right: 8px;
                }

                i {
                    transform: rotate(-90deg);
                }

                .select_icon {
                    color: rgba(0, 0, 0, 0.7) !important;
                    transform: rotate(0);
                    position: absolute;
                    left: 0;
                    font-size: 13px;
                    border: 1px solid #278bd9;
                    background: #bed4e5;
                    height: 18px;
                    width: 18px;
                    text-align: center;
                }

                .tubiao {
                    font-size: 14px;
                    width: 30px;
                    text-align: left;
                }
            }

            .active {
                border-color: #85bdf6;
                background-color: #b9d1eb;
                position: relative;
                z-index: 10;

                i {
                    color: #fff;
                }
            }
        }
    }

    .right {
        position: absolute;
        border: 1px solid #000;
        left: 140px;
        z-index: 20;
    }
}
</style>
